<div class="message-wrap" id="messageDialogWrap">
    <div class="message-head clearfix">
        <ul class="head-nav mr-30">
            <li :class="{active: baseMessageUser_status === 0}" @click="handleShowMsg(0)">
                <a href="javascript:;">未读(<span v-text="unread"></span>)</a>
            </li>
            <li :class="{active: baseMessageUser_status === 1}" @click="handleShowMsg(1)">
                <a href="javascript:;">已读(<span v-text="read"></span>)</a>
            </li>
        </ul>
        <div class="head-search">
            <form class="layui-form">
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" placeholder="请输入关键词" name="key" autocomplete="off" class="layui-input">
                </div>
                <a href="javascript:;" class="layui-btn layui-btn layui-btn-xs layui-bg-lightblue" lay-submit lay-filter="messageSearch"><i class="fa fa-search"></i></a>
            </form>
        </div>
        <div class="head-right">
            <form class="layui-form">
                <div class="layui-input-inline">
                    <select name="relevanceType" lay-filter="messageType">
                        <option value="0">所有</option>
                        <option value="1">加入项目</option>
                    </select>
                </div>
            </form>
            <div class="layui-dropdown dropdown-right" lay-filter='messageOperation' v-show="baseMessageUser_status === 0">
                <button class="layui-btn layui-btn-xs layui-btn-primary layui-dropdown-toggle">
                    <i class="fa fa-th-large"></i> 操作
                </button>
                <div class="layui-dropdown-content">
                    <div class="layui-dropdown-menu ">
                        <li><a href="javascript:;" @click="handleSetRead">全部设为已读</a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--列表-->
    <div class="layui-row message-container">
        <div class="layui-col-md4" style="position: relative; height: 100%">
            <div class="message-list" id="messageList"></div>
        </div>
        <div class="layui-col-md8 pl-20" style="position: relative; height: 100%">
            <div class="message-detail" id="messageDetail"></div>
        </div>
    </div>
</div>
<script type="text/html" id="messageListTemp">
    {{#  layui.each(d, function(index, item){ }}
    <div class="list-item isRead" data-id="{{item.id}}" data-action="{{item.url}}">
        <div class="item-head clearfix">
            <span style="">{{helperTools.decodeHTMLEntities(item.namecn)}}</span>
            <span class="pull-right s-date color-gray">{{item.createTime}}</span>
        </div>
        <div class="item-content">{{item.content}}</div>
    </div>
    {{#  }); }}
</script>
<script>
    layui.use(['form', 'laytpl', 'flow', 'utils', 'miniPage'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            flow = layui.flow,
            utils = layui.utils,
            miniPage = layui.miniPage;

        // function htmlStr(str){
        //     str = str.replace(/&amp;/gi, '&');
        //     str = str.replace(/&nbsp;/gi, ' ');
        //     str = str.replace(/&quot;/gi, '"');
        //     str = str.replace(/&#39;/g, "'");
        //     str = str.replace(/&lt;/gi, '<');
        //     str = str.replace(/&gt;/gi, '>');
        //     str = str.replace(/<br[^>]*>(?:(rn)|r|n)?/gi, 'n');
        //     return str;
        // };

        // /&(lt|gt|nbsp|amp|quot);/ig

        var messageDialogWrap = new Vue({
            el: '#messageDialogWrap',
            data: function () {
                return {
                    queryData: {
                        pageIndex: 1,
                        pageSize: 10,
                        baseMessageUser_status: 0
                    },
                    baseMessageUser_status: 0,
                    unread: 0,
                    read: 0,
                    lists: []
                }
            },
            mounted: function () {
                form.render();
                utils.dropdown({
                    el: '[lay-filter="messageOperation"]',
                    zIndex: 10000,
                    trigger: 'click'
                });
                this.getMessageData();
            },
            methods: {
                getMessageData: function (options) {
                    var that = this;
                    utils.copyObject(that.queryData, options);

                    $('#messageList').html('');
                    $('#messageDetail').html('');

                    flow.load({
                        elem: '#messageList',
                        scrollElem: '#messageList',
                        done: function (page, next) {
                            that.queryData.pageIndex = page;
                            utils.Ajax({
                                url: 'api/common/message.json',
                                dataType: 'json',
                                type: 'post',
                                data: that.queryData,
                                success: function (response) {
                                    var data = response.data;

                                    var pages = Math.ceil(data.total / that.queryData.pageSize);

                                    that.read = data.read;
                                    that.unread = data.unread;

                                    laytpl($('#messageListTemp').html()).render(data.records, function (html) {
                                        next(html, page < pages);
                                    });
                                    if (page == 1) {
                                        $('#messageList').find('.list-item').eq(0).trigger('click');
                                    }
                                }
                            })
                        },
                        end: '没有更多了'
                    })
                },
                handleShowMsg: function (status) {
                    var that = this;
                    that.baseMessageUser_status = status;
                    that.getMessageData({
                        baseMessageUser_status: status
                    })
                }, // 切换已读、未读
                handleSetRead: function () {
                    var that = this;
                    layer.confirm('确定要执行吗？', {title: '信息', shade: 0.2, btn: ['确定', '取消']}, function (index) {
                        utils.Ajax({
                            url: '',
                            dataType: 'json',
                            type: 'post',
                            data: {},
                            success: function (response) {
                                layer.msg(response.message);
                                that.baseMessageUser_status = 0;
                                that.getMessageData({
                                    baseMessageUser_status: 0
                                });
                                layer.close(index);
                            }
                        })
                    });

                }, // 设置已读
            }
        });

        // 搜索
        form.on('submit(messageSearch)', function (data) {
            messageDialogWrap.getMessageData({
                key: data.field.key
            })
        });

        // 筛选
        form.on('select(messageType)', function (data) {
            messageDialogWrap.getMessageData({
                relevanceType: data.value
            })
        });

        // 点击消息
        $('#messageList').on('click', '.list-item', function () {
            var $this = $(this);

            $this.addClass('active');
            $this.siblings().removeClass('active');

            var messageUrl = $this.data('action');
            var messageContent = miniPage.getHrefContent(messageUrl);

            if ($this.hasClass('unread')) {
                var obj = {
                    messageId: $this.data('id')
                };
                utils.Ajax({
                    url: 'api/common/nav.json',
                    dataType: 'json',
                    type: 'post',
                    data: obj,
                    success: function (response) {
                        $this.removeClass('unread');
                    }
                })
            }
            $('#messageDetail').html(messageContent); // 显示详情

            // layer.open({
            //     title: '消息详情',
            //     type: 1,
            //     shade: 0.2,
            //     area: ['1200px', '80%'],
            //     content: messageContent,
            //     btn: false,
            //     success: function(layero, index){
            //         if ($this.hasClass('unread')) {
            //             var obj = {
            //                 messageId: $this.data('id')
            //             };
            //             utils.Ajax({
            //                 url: 'api/common/nav.json',
            //                 dataType: 'json',
            //                 type: 'post',
            //                 data: obj,
            //                 success: function (response) {
            //                     $this.removeClass('unread');
            //
            //                     // 弹出弹窗
            //                 }
            //             })
            //         }
            //     },
            //     end: function () {
            //         messageDialogWrap.getMessageData()
            //     }
            // });

        })
    })
</script>
